<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <table class="table table-bordered">

        <tbody>
        <tr v-for="(item, itemIndex) in items">
            <td>
                <select class="form-control" @change="onSelectedDrug($event, item)">
                    <option :value="drug.id" v-for="drug in drugs">{{ drug.name }}</option>
                </select>
            </td>

        </tr>

        </tbody>
    </table>
    <hr>
    <p>
    <pre>
{{$data|json}}
</pre>
    </p>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                items: [],

                drugs: [
                    { id: 1, name: '第一个', unit: '個', },
                    { id: 2, name: '第二个', unit: '條', },
                    { id: 3, name: '第三个', unit: '坨', },
                    { id: 4, name: '第四个', unit: '顆', },
                ],
                totalMoney: 0
            }
        },
		mounted(){
			this.add();
		},
        methods: {
            add() {
                this.items.push({
                    drug_id: null,
                    use: '',
                    rate: '',
                    amount: '',
                    money: 0,
                })
            },
            //这里就是监听了 获取她的值
            onSelectedDrug(event, item) {
                item.drug_id = parseInt(event.target.value)
                this.calculateMoney(item)
            },


        }
    })

</script>
</body>
</html>